<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文都云协同</title>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <link href="../../css/font-awesome.min.css" rel="stylesheet">
    <style>
        #app {
            padding: 10px;
        }

        .xdq-funs{
            margin-bottom:20px;
            padding:0px 0px 10px 0px;
            border-radius:10px;
            box-shadow: 0px 0px 5px #DDDDDD;
        }

        .xdq-funs > .xdq-funs-mainfun{
            padding:10px 0px 10px 15px;font-weight: bold;
        }

        .xdq-funs > .xdq-funs-subfun{
            padding:0px 0px 0px 15px;
        }

        .xdq-funs > .xdq-funs-subfun > .xdq-funs-subfun-item{
            margin:10px 10px;width:120px;
        }

    </style>
</head>

<body>
    <div id="app">

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">基础信息</li>
                <li class="breadcrumb-item active">员工管理</li>
            </ol>
        </nav>

        <form class="row row-cols-lg-auto g-3 align-items-center mb-3">

            <div class="col-12">
                <div class="input-group">
                    <div class="input-group-text">角色编号</div>
                    <input type="text" class="form-control" placeholder="请输入角色编号" v-model="query.ro_id">
                </div>
            </div>
            <div class="col-12">
                <div class="input-group">
                    <div class="input-group-text">角色名称</div>
                    <input @keyup="goPage(1)" type="text" class="form-control" placeholder="请输入角色名称" v-model="query.ro_name">
                </div>
            </div>


            <div class="col-12">
                <button type="button" class="btn btn-primary" @click="goPage(1)"> <i class="fa fa-search"></i> 查询</button>
            </div>
        </form>


        <button class="btn btn-primary">新增</button>
        <div style="margin-top:10px;padding:20px;height:400px;overflow: auto;border:1px solid #DDDDDD;box-shadow: 0px 0px 10px 0px #DDDDDD;">
            <table class="table">
                <thead>
                    <tr>
                        <th>角色编号</th>
                        <th>角色名称</th>
                       
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in page.list" :key="item.ro_id">
                        <td>{{item.ro_id}}</td>
                        <td>{{item.ro_name}}</td>
                        
                        <td>
                            <button type="button" class="btn btn-link">修改</button>
                            <button type="button" class="btn btn-link">删除</button>
                            <button type="button" class="btn btn-link" @click="openFuns(item)" >权限</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <nav style="padding-top:10px;border-top:1px solid #DDDDDD;">
            <ul class="pagination">
                <li class="page-item" style="flex:none;display: flex;align-items: center;">
                    <div style="flex:none;padding-right:3px;">每页</div>
                    <select class="form-select form-select-sm" v-model="query.pageSize" @change="goPage(1)">

                        <option v-for="num in pageList" :value="num">{{num}}</option>

                    </select>
                    <div style="flex:none;padding-left:3px;padding-right:10px;">条记录</div>
                </li>
                <li class="page-item"><a class="page-link" href="#" @click="goPage(page.first)">首页</a></li>
                <li class="page-item"><a class="page-link" href="#" @click="goPage(page.pre)">上页</a></li>
                <li class="page-item"><a class="page-link" href="#" @click="goPage(page.next)">下页</a></li>
                <li class="page-item"><a class="page-link" href="#" @click="goPage(page.last)">尾页</a></li>
                <li class="page-item" style="flex:1;display: flex;align-items: center;justify-content: flex-end;">

                    当前第<input type="number" v-model="query.pageNum" @change="goPage(query.pageNum)"
                        style="margin:0px 2px;outline: none;width:60px;border:1px solid #DDDDDD;border-radius:5px;text-align: center;" />页{{page.currSize}}条记录，共{{page.pgTotal}}页{{page.total}}条记录

                </li>
            </ul>
        </nav>


        <div id="funs-win" style="display:none;padding:15px;">
          <!--窗口内容-->
            {{selectedFunIds}}
          
            <div v-for="main in funList" :key="main.menuId" class="xdq-funs">
                <div class="xdq-funs-mainfun">{{main.menuName}}</div>
                <div class="xdq-funs-subfun">
                    <div v-for="sub in main.children" :key="sub.menuId" style="vertical-align: top;" 
                    class="form-check form-switch form-check-inline xdq-funs-subfun-item" >
                        <input  v-model="selectedFunIds" :value="sub.menuId" 
                        class="form-check-input" type="checkbox" :id="'id'+'-'+sub.menuId">
                        <label class="form-check-label" :for="'id'+'-'+sub.menuId">{{sub.menuName}}</label>
                    </div>               
                </div>
            </div>

            <div  style="text-align: right;position: sticky;bottom:5px;margin-bottom:10px;">
                <button class="btn btn-primary btn-lg" style="opacity: 0.75;"  @click="setFuns" >确定</button>
            </div>
        
            
        </div>

    </div>

    <script src="../../layer/jquery-3.6.0.min.js"></script>
    <script src="../../layer/layer.js"></script>

    <script src="../../js/bootstrap.bundle.min.js"></script>
    <script src="../../js/vue.global.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/wendu.js"></script>


    <script>
        const app = {
            setup() {

                //定义查询条件
                const query = Vue.reactive({
                    pageNum: 1,//请求页码
                    pageSize: 5,//请求每页记录数
                    ro_id: '',
                    ro_name: ''
                    
                });

                //分页数据
                const page = Vue.ref({
                    list: [],
                    current: 1,
                    pageSize: 5
                });

                const pageList = Vue.ref([3, 5, 10, 15, 20, 30, 100]);//每页记录数



                const empList = Vue.ref([]);
                const getPage = () => {
                    req(ajax.get('/security/role', { params: query }), result => {
                        //empList.value = result.data;
                        page.value = result.data;

                        //根据回送数据修正query
                        query.pageNum = page.value.current;
                        query.pageSize = page.value.pageSize;
                    })
                };

                //根据请求页码和每页记录数获取分页数据
                const goPage = (pageNum, pageSize) => {
                    if (!pageNum) query.pageNum = 1;
                    else {
                        query.pageNum = pageNum;
                        if (pageSize) query.pageSize = pageSize;
                    }
                    getPage();
                };


                goPage(1);

                const funsIdx = Vue.ref(null);//窗口标志
                let currRoleId = null;//当前选中设置权限的角色id
                //打开权限窗口
                const openFuns = (role)=>{

                    currRoleId = role.ro_id;//记录当前中设置权限的角色id

                    req(ajax.get('/security/role/funs/'+role.ro_id),result=>{
                        selectedFunIds.value = result.data;
                    });

                    // setTimeout(()=>{
                    //     selectedFunIds.value = [3005,4005];
                    // },3000);

                    funsIdx.value = layer.open({
                        type: 1,
                        title: role.ro_name+'的权限',
                        content: $('#funs-win'), 
                        area: ['800px', '600px']


                    });
                };

                //所有权限数据
                const funList = Vue.ref([]);

                //获取所有权限
                const getAllFuns = ()=>{
                    req(ajax.get('/security/role/funs'),result=>{
                        funList.value = result.data;
                    });
                };

                getAllFuns();

                //选中的权限编号
                const selectedFunIds = Vue.ref([]);

                //确定设置权限
                const setFuns = ()=>{

                    req(ajax.put('/security/role/funs/'+currRoleId,selectedFunIds.value),result=>{
                        layer.msg('权限设置成功！',{icon:1});
                    });
                }

               

                return {
                    query,
                   
                    page,//分页数据
                    pageList,
                   
                    goPage,

                    openFuns,

                    funList,

                    selectedFunIds,

                    setFuns
                   
                };
            }
        };
        Vue.createApp(app).mount('#app');
    </script>

</body>

</html>